<!--
- Author:   .
- Date:    2018/1/11 0011.
- File:    friend.
-->
<template>
  <div class="Web_Box">
    <div>
      <div class="bod_box">
        <div class="Customers">
          <ul class="f-cb" style="width: 100%; background: #f83166">
            <li>批发：{{friendCount.a}}</li>
            <li>花店：{{friendCount.b}}</li>
            <!--<li>零售：{{friendCount.c}}</li>-->
          </ul>
        </div>
        <div class="suborbox f-cb">
          <div class="subornat"><i class="iconfont icon-downdot"></i>
            <select v-model="selectUserLv">
              <option value="">全部类型</option>
              <option :value="$dictionary.userLv.a">批发</option>
              <option :value="$dictionary.userLv.b">花店</option>
              <!--<option :value="$dictionary.userLv.c">零售</option>-->
            </select>
          </div>
          <div class="screenbox"><a><i class="iconfont icon-shijian" @click="openDatePicker"></i></a>
            <router-link :to="{name: 'search-friend'}">搜索</router-link>
          </div>
        </div>
      </div>
    </div>
    <div
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="false"
      infinite-scroll-distance="0"
      infinite-scroll-immediate-check="false">
      <div class="sub_block" v-for="friend in friendList.data">
        <div class="block f-cb">
          <span class="fl w50b">姓名：{{friend.member_truename}}</span><span class="fl">电话：{{friend.member_mobile}}</span>
        </div>
        <div class="block f-cb"><span class="fl w50b">类型：{{friend.type | userLvTypeName}}</span>
          <div class="fl"><span class="pt5 disib">购买订单数：{{friend.order_num}}</span>
            <span class="look" @click="gotoFriendOrderList(friend)">查看</span>
          </div>
        </div>
        <div class="block f-cb"><span  class="fl w50b">订单金额：{{friend.order_amount}}</span><span class="fl w50b">贡献积分：<span class="cr_f83166">￥{{friend.freeze_balance}}</span></span>
        </div>
        <div class="block f-cb"><span class="fl w50b">身份：{{friend.is_brush_man == '1' ? '分销商' : '普通用户'}} <span class="w50b cr_f83166" v-show="friend.member_id != memberInfo.member_id && friend.is_brush_man == '0'" @click="setBrush(friend)">设为刷手</span></span><span class="fl">有效人数：{{friend.vaild_childs}}</span>
        </div>
      </div>
    </div>
    <loading-more :allLoaded="friendList.allLoaded" :show="friendList.data.length > 0"></loading-more>
    <empty-data :show="friendList.allLoaded && friendList.data.length <= 0"></empty-data>
    <footer-tab></footer-tab>
    <datetime-picker
      ref="datePicker"
      v-model="currentDate"
      type="date"
      year-format="{value} 年"
      month-format="{value} 月"
      date-format="{value}日"
      @confirm="handleDateChange">
    </datetime-picker>
  </div>
</template>

<script>
  import DatetimePicker from '../../components/monthPicker'
  import {mapModules, mapRules} from 'vuet'

  export default{
    mixins: [
      mapModules({memberInfo: 'memberInfo'}),
      mapRules({need: ['memberInfo']})
    ],
    data() {
      return {
        friendList: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []},
        currentDate: new Date(),
        selectMonth: '',
        selectUserLv: '',
        friendCount: {a: '', b: '', c: ''}

      }
    },
    components: {
      'datetime-picker': DatetimePicker
    },
    created() {
      this.getFriendCount()
      this.initBalanceHistory()
    },
    watch: {
      selectUserLv: function (value) {
        this.selectUserLv = value
        this.initBalanceHistory()
      }
    },
    methods: {
      gotoFriendOrderList(friend) {
        this.$router.push({name: 'order-friend', query: {memberId: friend.member_id, userLv: friend.type}})
      },
      setBrush(friend) {
        this.$request.setBrush(friend.member_id).then(data => {
          this.$toast('设置成功')
          friend.is_brush_man = '1'
        })
      },
      getFriendCount() {
        this.$request.getFriendCount().then(data => {
          this.friendCount = data
        })
      },
      initBalanceHistory() {
        this.friendList = {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
        this.getFriendList(this.friendList.page, this.friendList.pageSize)
      },
      openDatePicker() {
        this.$refs.datePicker.open()
      },
      handleDateChange(value) {
        let date = new Date(value)
        let dateStr = this.$utils.formatDate(date, 'yyyy-MM-dd')
        this.selectMonth = dateStr
        this.initBalanceHistory()
      },
      getFriendList(page, pageSize) {
        let params = {s_time: this.selectMonth, type: this.selectUserLv, pageSize: pageSize, page: page}
        this.friendList.loading = true
        this.$request.getFriendList(params).then(data => {
          if (data.length < this.friendList.pageSize) {
            this.friendList.allLoaded = true
          }
          this.friendList.data = [...this.friendList.data, ...data]
        }).finally(() => {
          this.friendList.requested = true
          this.friendList.loading = false
        })
      },
      loadMore() {
        if (this.friendList.loading || this.friendList.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getFriendList(++this.friendList.page, this.friendList.pageSize)
        }, 500)
      }
    }
  }
</script>

<style>

</style>